import React from 'react'

var Button = component('Button')
var PreBonusName = component('PreBonusName')
var Grid = component('Grid')
var TipsBanner = component('TipsBanner')

var PrepareBigBonus = model('PrepareBigBonus');
var BigBonus = model('BigBonus');
var selectedAduio = require('../../Resource/sound/select.mp3');
var wrongAduio = require('../../Resource/sound/wrong.mp3');

var Style = require('./style.css')

module.exports = React.createClass({
	getInitialState() {
		return {
			step: {
				name: '',
				picked: '',
				leave: ''
			},
			total: {
				picked: '',
				leave: ''
			},
			tipsClose: true
		};
	},
	cellRender(data){
		return <PreBonusName key={data} value={data} selected={data.selected} onSelect={this.onSelectFace}/>
	},
	componentDidMount() {
		var self = this;
		setTimeout(function() {
			self.updateStep();
			self.scroll();
		}, 1000);
	},

	updateStep(){
		var pickPack = PrepareBigBonus.getCurrentPickPack()
		var step = PrepareBigBonus.getStep();

		console.log(PrepareBigBonus._getCurrentStepNumber());
		
		step.picked = pickPack.length;
		step.leave = step.count - step.picked;
		var total = {
			picked:  BigBonus.getAll().length + pickPack.length
		};
		total.leave = BigBonus.config.count - total.picked;
		var data = PrepareBigBonus.getAll().sort(function(a, b) {
			return parseInt(a.id) - parseInt(b.id);
		});

		this.setState({data: data, step: step, total: total});
	},

	scroll() { //名單滾動
		var self = this,
			body = self.refs['body'],
			container = self.refs['container'],
			goTimer,
			direction = false, //滾動方向
			step = -1,
			time = 10000; //間隔時間

		function move() {
			if (direction) {
				step++;
			}else {
				step--;
			}
			
			if (step == -body.offsetHeight || step == 0) { //滾完一頁
				direction = !direction;
				clearInterval(goTimer);
				setTimeout(function() {
					go();
				}, time);
				return false;
			}
			container.style.marginTop = step + 'px';
		}

		function go() {
			goTimer = setInterval(function() {
				move();
			}, 1);
		}
		setTimeout(function() {
			go();
		}, time);
	},

	onSelectFace(selected, value){
		global.wrong = this.refs.wrong;
		try{
			selected ? PrepareBigBonus.unpick(value.index) : PrepareBigBonus.pick(value.index);
		} catch(e) {
			this.refs.wrong.pause();
			this.refs.select.src = wrongAduio;
			this.refs.wrong.play();
			throw e;
		}
		this.refs.select.pause();
		this.refs.select.src = selectedAduio;
		this.refs.select.play();
		this.updateStep();
		return true;
	},

	onConfirm(){
		if (!this.state.tipsClose) return;
		PrepareBigBonus.nextStep();
		this.setState({tipsClose: false});
		this.updateStep();
	},

	closeTips(){
		this.setState({tipsClose: true});
	},

	render(){
		return (
			<div ref="body" className={global.baseStyle.body}>
				<div ref="container" className={Style.container}>
					<Grid col={9} data={this.state.data} cellRender={this.cellRender} />
				</div>
				<audio ref="wrong" src={wrongAduio}/>
				<audio ref="select" src={selectedAduio}/>
				{!this.state.tipsClose && <TipsBanner name="幸运儿已诞生！" onClose={this.closeTips}/>}
			</div>
		);
	}
});